<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="height: 212px"
    >
      <van-swipe-item v-for="item in Swiperlist" :key="item.id">
        <img
          v-lazy="'http://liufusong.top:8080' + item.imgSrc"
          style="height: 212px; width: 414px"
        />
      </van-swipe-item>
    </van-swipe>
    <van-search
      class="search"
      v-model="value"
      placeholder="请输入小区或地址"
      background="transparent"
      @search="onCity"
    >
      <template #label>
        <div @click="onCity">{{ $store.state.city }}</div>
      </template></van-search
    >
    <div>
      <van-icon class="play" name="play" />
    </div>
    <div><van-icon class="xian" name="minus" /></div>
    <div>
      <van-icon class="home" name="home-o" @click="gomap" />
    </div>
    <div class="Grid">
      <van-grid :border="false">
        <van-grid-item icon="wap-home-o" text="整租" to="/layout/search" />
        <van-grid-item icon="friends-o" text="合租" to="/layout/search" />
        <van-grid-item icon="aim" text="地图找房" to="/map" />
        <van-grid-item icon="home-o" text="去出租" to="/rent/add" />
      </van-grid>
    </div>
    <div class="Team">
      <van-cell title="租房小组 " value="更多" />
      <div class="gridiitem">
        <div class="am-flexbox-item" v-for="item in Groupslist" :key="item.id">
          <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
          <div class="Pname">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwiper } from '@/api/swiper.js'
import { getgroups } from '@/api/groups.js'
import { Toast } from 'vant'
export default {
  name: 'home',
  data () {
    return {
      Swiperlist: [],
      value: '',
      Groupslist: []
    }
  },

  created () {
    this.getSwiperList()
    this.getGroups()
  },

  methods: {
    async getSwiperList () {
      try {
        const loading = Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0 // 持续展示 toast
        })
        const res = await getSwiper()
        console.log(res)
        this.Swiperlist = res.data.body
        loading.clear()
      } catch (err) {
        alert('错误了')
      }
    },
    async getGroups () {
      try {
        const res = await getgroups()
        console.log(res)
        this.Groupslist = res.data.body
      } catch (err) {
        alert('小组信息获取失败！')
      }
    },
    gomap () {
      this.$router.push('/map')
    },
    onCity () {
      this.$router.push('/city')
    }
  }
}
</script>

<style scoped lang="less">
.my-swipe {
  position: relative;
}
.van-search__content {
  background-color: #fff;
  .van-search__label {
    padding: 0 38px 0 0;
    font-size: 14px;
    color: #333;
  }
}
.search {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 320px;
  height: 34px;
}
.play {
  transform: rotate(90deg);
  color: #7f7f80;
  position: absolute;
  top: 25px;
  left: 70px;
  margin-right: 20px;
  font-size: 12px;
}
.xian {
  transform: rotate(90deg);
  position: absolute;
  color: #e2e5e7;
  top: 23px;
  left: 85px;
  margin-right: 20px;
  font-size: 19px;
}
.home {
  position: absolute;
  transform: rotate(0deg);
  right: 15px;
  top: 17px;
  font-size: 30px;
  color: #ffffff;
}
/deep/.van-icon-search {
  color: #a4a8a8;
}
.Grid {
  /deep/.van-grid-item__icon {
    font-size: 50px;
    color: #53c897;
  }
  /deep/.van-grid-item__text {
    font-size: 14px;
    color: #333;
  }
}
.Team {
  background-color: #f6f5f6;
  // width: 414px;

  height: 187px;
  padding: 0 10px;
  overflow: hidden;
  box-sizing: border-box;
  .van-cell {
    background-color: #f6f5f6;
    width: 100%;
    padding: 10px 0px;
    .van-cell__title {
      font-size: 15px;
      color: #333;
      font-weight: 800;
    }
  }
  .gridiitem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .am-flexbox-item {
      display: flex;
      background-color: #fff;
      width: 170px;
      height: 60px;
      margin-bottom: 10px;

      img {
        width: 50px;
        height: 50px;
        margin: 0 10px;
        margin-top: 5px;
      }
      .Pname {
        margin-top: 0px;
        font-size: 12px;
        color: #333;
      }
      // margin-right: 10px;
    }
  }
}
</style>
